<template>
    <div class="blog-add">
        <!-- 博客标题 -->
        <van-field
            v-model="title"
            label="标题"
            maxlength="100"
            placeholder="请输入博客标题"
        />

        <!-- 博客内容 -->
        <van-field
            v-model="content"
            rows="20"
            autosize
            label="博客内容"
            type="textarea"
            maxlength="10000"
            placeholder="请输入博客内容"
            show-word-limit
        />

        <!-- 博客发表按钮 -->
        <van-button type="primary" plain block @click="addBlog"
            >发表</van-button
        >
    </div>
</template>

<script>
export default {
    data() {
        return {
            title: "",
            content: "",
        };
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        async addBlog() {
            // 添加博客
            const res = await this.$http.post("/blogs", {
                title: this.title,
                content: this.content,
            });
            // 添加失败
            if (res.code !== 201) {
                this.$toast({
                    type: "fail",
                    message: res.message,
                });
                return;
            }
            // 添加成功
            this.$notify({
                type: "success",
                message: res.message,
            });
            // 跳转到首页
            this.$router.push("/admin/blog/list");
        },
    },
};
</script>

<style lang="less">
.blog-add {
    .van-field,
    .van-button {
        margin-top: 10px;
    }
}
</style>
